<template>
  <div>
    <div class="detail">
      <div class="detail_head">
        <div class="line"></div>
        <span>资产基本信息</span>
      </div>
      <div class="detailBox">
        <div class="boxTxt">
          <div class="box">券名称：{{ info.name }}</div>
          <div class="box">券副标题：{{ info.shortName }}</div>
          <div class="box">发行状态：{{ info.statusDict }}</div>
          <div class="box" v-if="info.validityType == 1">
            发行有效时间：{{ info.issueTime }} ~ 长期有效
          </div>
          <div class="box" v-if="info.validityType == 2">
            发行有效时间：{{ info.validityStartTime }} ~
            {{ info.validityEndTime }}
          </div>
          <div class="box" v-if="info.validityType == 3">
            发行有效时间：领取后{{ info.validityDay }}天有效
          </div>
          <div class="box">面值：{{ info.worth }}/CNY</div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="detail_head">
        <div class="line"></div>
        <span>使用规则</span>
      </div>
      <div class="detailBox">
        <div class="boxTxt">
          <div class="box">规则：{{ info.rules }}</div>
          <div class="box">获取规则：{{ info.sendTypeDict }}</div>
          <div class="box">
            日发放最大限制：{{
              info.sendLimitType == 1 ? "无限制" : info.sendLimitCount
            }}
          </div>
          <div class="box">
            单用户最大获取数：{{
              info.userLimitType == 1 ? "无限制" : info.userLimitCount
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="detail_head">
        <div class="line"></div>
        <span>流通信息</span>
      </div>
      <div class="detailBox">
        <div class="statistics_left">
          <div class="statisticsBox">
            <div class="statisticsBox_L">今日券流出量</div>
            <div class="statisticsBox_R">{{ selectFlowUnit.outflow }}</div>
          </div>
          <div class="statisticsBox">
            <div class="statisticsBox_L">今日券回收量</div>
            <div class="statisticsBox_R">{{ selectFlowUnit.recycle }}</div>
          </div>
        </div>
        <div class="statistics_right">
          <div id="ichart" :style="{ height: '272px', width: '800px' }" />
          <div class="toupdatetime">更新时间：{{ selectFlowUnit.endTime }}</div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="detail_head">
        <div class="line"></div>
        <span>联动信息</span>
      </div>
      <div class="detailBox" style="display: block">
        <div class="assets_H">
          <el-form :inline="true" :model="integral" class="demo-form-inline">
            <el-form-item label="账户/资产：">
              <el-input
                v-model="integral.name"
                placeholder="请输入账户/资产名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请时间：">
              <el-date-picker
                v-model="integral.applyTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="联动状态：">
              <el-select v-model="integral.queryType" placeholder="全部">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="assets_B">
          <div class="linkageing" v-if="numisShow">
            正在联动营销商户数
            <span style="color: #1989fa">{{
              merchantNumber.linkageTotal
            }}</span>
            个；累计联动营销商户数
            <span style="color: #1989fa">{{
              merchantNumber.linkageNumber
            }}</span>
            个
          </div>
          <ex-table
            ref="table"
            :loading="loading"
            :table-column="tableColumn"
            :table-data="tableData"
            @pageSizeChange="handleSizeChange"
            @currentPageChange="handleCurrentChange"
          >
            <template v-slot:operate="{ scope }">
              <el-button @click="lookDetail(scope.row.id)">立即处理</el-button>
            </template>
          </ex-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  couTicketInfo,
  merchantNumber,
  adminLinkageList,
  adminDict,
} from "@/api/merchants";
import handlePageMixin from "@/mixins/handlePageMixin";
// import echarts from "echarts";
import * as echarts from 'echarts';
export default {
  name: "situation",
  props: {},
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      datalist: [
        { value: 0, name: "剩余量", itemStyle: { color: "#02ACFE" } },
        { value: 0, name: "流通量", itemStyle: { color: "#FF9300" } },
      ],
      date: [],
      integral: {
        name: "", //账户/资产名称
        queryType: "", //联动状态
        applyTime: "", //申请时间
      },
      info: {},
      selectFlowUnit: {},
      integralId: "",
      merchantId: "",
      options: [],
      tableData: [],
      tableColumn: [
        { prop: "assetName", label: "关联资产名称（A）" },
        { prop: "linkageMerchantName", label: "对方通兑商户名称" },
        {
          prop: "linkageAssetName",
          label: "对方通兑资产名称（B）",
          width: 180,
        },
        { prop: "exchangeTypetxt", label: "兑换类型（A-B）" },
        { prop: "worthTypetxt", label: "资产价值（A-B）" },
        { prop: "ratio", label: "兑换比例（A：B）" },
        { prop: "validitytxt", label: "发行有效期", width: 180 },
        { prop: "statusDict", label: "联动状态", width: 120 },
        { prop: "linkageAssetUsable", label: "累计兑换B资产" },
        { prop: "createTime", label: "申请时间" },
      ],
      merchantNumber: "",
      numisShow: true,
      totalNum: 0,
    };
  },
  mounted() {
    let query = this.$route.query;
    this.integralId = query.integralId;
    this.merchantId = query.merchantId;
    this.getlinkagelist();
    this.getintegralInfo();
  },
  methods: {
    getlinkagelist() {
      //获取联动状态
      const params = {
        dictType: "merchant_linkage_status",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: "",
            value: "全部",
          },
        ];
        this.options = arr.concat(res.result[0].dictList);
      });
    },
    getintegralInfo() {
      const params = {
        ticketId: this.integralId,
        merchantId: this.merchantId,
      };
      couTicketInfo(params).then((res) => {
        this.info = res.result;
        //this.totalNum = res.result.beeAssetCirculateStatisticsDTO.surplus + res.result.beeAssetCirculateStatisticsDTO.circulate + res.result.beeAssetCirculateStatisticsDTO.recycle
        this.totalNum = res.result.issueTotal;
        this.selectFlowUnit = res.result.beeAssetCirculateStatisticsDTO;
        this.datalist[0].value = parseInt(
          res.result.beeAssetCirculateStatisticsDTO.surplus
        );
        this.datalist[1].value = parseInt(
          res.result.beeAssetCirculateStatisticsDTO.circulate
        );
        console.log(this.datalist[0].value);
        console.log(this.datalist[1].value);
        this.initChart();
        this.getmerchantNumber();
        this.getList();
      });
    },
    getmerchantNumber() {
      //获取资产联动商家数量
      const params = {
        assetId: this.info.assetId,
      };
      merchantNumber(params).then((res) => {
        this.merchantNumber = res.result;
      });
    },
    getList() {
      //联动信息
      const params = {
        ...this.pageOptions,
        ...this.integral,
        assetId: this.info.assetId,
        merchantId: this.merchantId,
      };
      this.loading = true;
      adminLinkageList(params)
        .then((res) => {
          const { total, records } = res.result;
          records.forEach((item) => {
            item.validitytxt = item.startTime + "~" + item.endTime;
            item.exchangeTypetxt =
              item.assetTypeDict + "-" + item.linkageAssetTypeDict;
            if (item.assetType == 2) {
              item.worth = "无";
            } else if (item.assetType == 1) {
              item.worth = "¥" + item.worth;
            }
            if (item.linkageAssetType == 2) {
              item.linkageWorth = "无";
            } else if (item.linkageAssetType == 1) {
              item.linkageWorth = "¥" + item.linkageWorth;
            }
            item.worthTypetxt = item.worth + " - " + item.linkageWorth;
          });
          this.tableData = records;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    search() {
      //搜索
      console.log(this.integral);
      if (
        this.integral.applyTime != "" ||
        this.integral.name != "" ||
        this.integral.queryType != ""
      ) {
        this.numisShow = false;
      } else {
        this.numisShow = true;
      }
      this.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      this.integral.applyTime = "";
      this.integral.name = "";
      this.integral.queryType = "";
      this.numisShow = true;
      this.pageOptions.pageNum = 1;
      this.getList();
    },
    initChart() {
      var myChart = echarts.init(document.getElementById("ichart"));

      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          //   right: "5%",
          //   left: "center",
          icon: "circle",
          itemWidth: 10,
          right: 20,
          top: 50,
          textStyle: {
            //文字的样式。
            color: "#5E6D84",
            fontSize: 16,
            padding: [
              5, // 上
              10, // 右
              5, // 下
              10, // 左
            ],
          },
          orient: "vertical",
          formatter: (name) => {
            let data = this.datalist;
            let total = 0;
            let target;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            let arr = [];
            if (total == 0) {
              arr = [
                "" +
                  name +
                  " | " +
                  0 +
                  "%" +
                  "   " +
                  target,
              ]
            } else {
              arr = [
                "" +
                  name +
                  " | " +
                  ((target / total) * 100).toFixed(0) +
                  "%" +
                  "   " +
                  target,
              ];
            }

            console.log(typeof target, target);
            console.log(typeof total, total);
            console.log(target / total);
            return arr.join("\n");
          },
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "15",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: true,
              position: "center",
              textStyle: {
                fontSize: "20",
                fontFamily: "黑体",
                fontWeight: "bold",
                rich: {
                  d: {
                    fontSize: 30,
                    color: "#696969",
                  },
                  e: {
                    fontSize: 15,
                    color: "#696969",
                    lineHeight: 25,
                  },
                },
              },
              formatter: (params) => {
                // let data = this.datalist;
                let number = this.totalNum;
                // data.forEach((data) => {
                //   number += data.value;
                // });
                return ["{e|发行总量}\n" + "{d|" + number + "}"];
              },
            },
            data: this.datalist,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.detail {
  margin-bottom: 20px;
}
.detail_head {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #303133;
}
.line {
  width: 2px;
  height: 12px;
  background: #1989fa;
  border-radius: 1px;
  margin-right: 4px;
}
.detailBox {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 24px 20px 8px;
  margin-top: 16px;
  display: flex;
  align-items: center;
}
.boxTxt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.box {
  font-size: 14px;
  color: #606266;
  width: 50%;
  margin-bottom: 16px;
}
.statistics_left {
  width: auto;
}
.statisticsBox {
  display: flex;
  align-items: center;
  opacity: 1;
  background: #f6f8fb;
  border-radius: 4px;
  margin-bottom: 20px;
  min-width: 234px;
  height: 52px;
}
.statisticsBox_L {
  height: 32px;
  border-right: 1px solid #d2d2d2;
  font-size: 14px;
  color: #303030;
  text-align: center;
  line-height: 32px;
  padding: 0 16px;
}
.statisticsBox_R {
  font-size: 20px;
  color: #ff5800;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
  padding: 0 34px;
}
.statistics_right {
  display: flex;
  align-items: center;
  position: relative;
}
.toupdatetime {
  color: #c0c4cc;
  font-size: 14px;
  position: absolute;
  right: 2%;
  bottom: 14%;
}
.linkageing {
  font-size: 14px;
  color: #303030;
  margin-bottom: 20px;
}
</style>